<template>
  <div class="app-container">
    <el-form :inline="true">
      <el-form-item>
        <el-select v-model="type" @change="typeChange">
          <el-option :label="$t('all')" value />
          <el-option :label="$t('slideshow')" value="phoneSlideshow" />
          <el-option :label="$t('video')" value="video" />
          <el-option :label="$t('qrCode')" value="qrCode" />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-plus"
          type="primary"
          @click="showAdd"
        >{{ $t('add') }}
        </el-button>
      </el-form-item>
      <el-form-item>
        <el-button
          icon="el-icon-folder"
          type="primary"
          @click="showUserFile"
        >{{ $t('file') }}
        </el-button>
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="resourceList"
      style="width: 100%"
    >
      <el-table-column :label="$t('preview')" width="100" >
        <template slot-scope="scope">
          <el-image
            v-if="scope.row.type === 'video'"
            width="30"
            style="width: 30px;height:30px"
            :src="scope.row.iconUrl"
            :preview-src-list="[scope.row.iconUrl]"
            fit="fit"
          />
          <el-image
            v-else
            width="30"
            style="width: 30px;height:30px"
            :src="scope.row.url"
            :preview-src-list="[scope.row.url]"
            fit="fit"
          />
        </template>
      </el-table-column>
      <el-table-column prop="type" :label="$t('type')" :formatter="fType" width="150"  />
      <el-table-column prop="title" :label="$t('title')" width="150"  />
      <el-table-column prop="url" :label="$t('url')" >
        <template slot-scope="scope">
          <el-link @click="open(scope.row.url)" v-text="scope.row.url" />
        </template>
      </el-table-column>
      <el-table-column prop="status" :label="$t('status')"  width="70">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status == 1?'success':'danger'" @click="changeStatus(scope.row)" v-text="scope.row.status == 1 ? $t('enable'):$t('stop')" />
        </template>
      </el-table-column>
      <el-table-column :label="$t('function')" width="180" >
        <template slot-scope="scope">
          <el-button
            type="text"
            icon="el-icon-edit"
            @click="edit(scope.row)"
          >{{ $t('edit') }}
          </el-button>
          <el-button
            type="text"
            icon="el-icon-delete"
            @click="del(scope.row)"
          >{{ $t('delete') }}
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <div style="margin: 15px 0;text-align: right">
      <el-pagination
        background
        :current-page.sync="currentPage"
        :page-size="pageSize"
        layout="total,sizes,prev,pager,next,jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>

    <el-dialog
      :title="$t('file')"
      :visible.sync="userFileVisible"
      top="15px"
    >
      <user-file :model="fileModel" @change="fileChoice" />
    </el-dialog>

    <el-dialog
      :title="myModalLabel"
      :visible.sync="dialogFormVisible"
    >
      <el-form>

        <el-form-item :label="$t('title')" label-width="20%">
          <el-input v-model="companyResource.title" />
        </el-form-item>
        <el-form-item :label="$t('icon')" label-width="20%">
          <el-input v-model="companyResource.iconUrl" />
        </el-form-item>
        <el-form-item :label="$t('url')" label-width="20%">
          <el-input v-model="companyResource.url">
            <template slot="append">
              <i class="el-icon-folder" @click="openFileChoice()" />
            </template>
          </el-input>
        </el-form-item>
        <el-form-item :label="$t('type')" label-width="20%">
          <el-select v-model="companyResource.type">
            <el-option :label="$t('slideshow')" value="phoneSlideshow" />
            <el-option :label="$t('video')" value="video" />
            <el-option :label="$t('qrCode')" value="qrCode" />
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">{{ $t('cancel') }}</el-button>
        <el-button type="primary" @click="addOrUpdate">{{ $t('confirm') }}</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import {
  successNotice,
  cancelNotice
} from '@/util/common'
import {
  pageGetCompanyResource,
  deleteCompanyResource,
  updateCompanyResource,
  insertCompanyResource
} from '@/api/iot/iotCompanyResourceApi'
import { getCompanyId } from '@/util/storage'
import { getPageSize, setPageSize } from '@/util/storage'
import UserFile from '@/components/UserFile'
export default {
  name: 'CompanyResource',
  components: {
    UserFile
  },
  data() {
    return {
      currentPage: 1,
      total: 0,
      pageSize: getPageSize(),
      loading: false,
      userFileVisible: false,
      resourceList: [],
      fileModel: '',
      companyResource: {
        resId: null,
        url: null,
        title: null,
        type: '',
        iconUrl: null
      },
      companyName: null,
      companyId: getCompanyId(),
      type: '',
      dialogFormVisible: false,
      myModalLabel: null,
      model: 'add'
    }
  },
  mounted() {
    const param = this.$route.query
    if (param != null && param.companyId != null) {
      this.companyId = param.companyId
      this.companyName = param.companyName
      this.setTagsViewTitle()
    }
    this.getList()
  },
  methods: {
    openFileChoice() {
      this.fileModel = 'choice'
      this.showUserFile()
    },
    fileChoice(filePath) {
      this.companyResource.url = filePath
      this.userFileVisible = false
    },
    showUserFile() {
      this.userFileVisible = true
    },
    open(url) {
      window.open(url)
    },
    edit(item) {
      this.companyResource = item
      this.dialogFormVisible = true
    },
    setTagsViewTitle() {
      this.tempRoute = Object.assign({}, this.$route)
      const route = Object.assign({}, this.tempRoute, {
        title: `${this.companyName}`
      })
      this.$store.dispatch('tagsView/updateVisitedView', route)
    },
    typeChange() {
      this.getList()
    },
    handleSizeChange(val) {
      this.pageSize = val
      setPageSize(this.pageSize)
      this.getList()
    },
    handleCurrentChange(item) {
      this.currentPage = item
      this.getList()
    },
    fType(item) {
      switch (item.type) {
        case 'phoneSlideshow':
          return this.$t('slideshow')
        case 'qrCode':
          return this.$t('qrCode')
        case 'video':
          return this.$t('video')
        default:
          return this.$t('unKnow')
      }
    },
    addOrUpdate() {
      if (!this.companyResource.resId) {
        insertCompanyResource({
          url: this.companyResource.url,
          type: this.companyResource.type,
          title: this.companyResource.title,
          iconUrl: this.companyResource.iconUrl,
          companyId: this.companyId
        }).then(res => {
          if (res.code === '200') {
            successNotice(this)
          }
          this.getList()
        })
      } else {
        updateCompanyResource({
          ...this.companyResource
        }).then(res => {
          if (res.code === '200') {
            successNotice(this)
          }
          this.dialogFormVisible = false
          this.getList()
        })
      }
    },
    showAdd() {
      this.myModalLabel = this.$t('add')
      this.companyResource = {}
      this.dialogFormVisible = true
    },
    getList() {
      this.loading = true
      const data = {
        pageSize: this.pageSize,
        currentPage: this.currentPage,
        companyId: this.companyId
      }
      if (this.type != null && this.type !== '') {
        data.type = this.type
      }
      pageGetCompanyResource(data).then(res => {
        this.loading = false
        if (res.code === '200') {
          this.total = res.data.total
          this.resourceList = res.data.data
        }
      })
    },
    changeStatus(item) {
      const data = {
        url: item.url,
        resId: item.resId,
        status: !item.status
      }
      updateCompanyResource(data).then(res => {
        if (res.code === '200') {
          successNotice(this)
        }
        this.getList()
      })
    },
    del(item) {
      const that = this
      this.$confirm(this.$t('delete'), {
        confirmButtonText: this.$t('confirm'),
        cancelButtonText: this.$t('cancel'),
        type: 'warning'
      })
        .then(function() {
          deleteCompanyResource({
            resId: item.resId
          }).then(res => {
            if (res.code === '200') {
              successNotice(that)
            }
            that.getList()
          })
        })
        .catch(function() {
          cancelNotice(that)
        })
    }
  }
}
</script>
